const {defineConfig} = require('@vue/cli-service')


const path = require('path');
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'


module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    publicPath: "./",
    productionSourceMap: false,
    // 这里是每个参数的含义：
//
// chunks：表示要提取哪些模块，可选值为 'all'、'async' 和 'initial'。默认为 'async'，表示只提取异步加载的模块。
// minSize：表示要提取的模块的最小体积，单位为字节。默认为 30000，即 30KB。
// maxSize：表示要提取的模块的最大体积，单位为字节。默认为 0，表示没有限制。
// minChunks：表示要提取的模块被引用的最小次数。默认为 1，即被引用一次就会被提取出来。
// maxAsyncRequests：表示异步加载的模块的最大并行请求数。默认为 5。
// maxInitialRequests：表示入口模块的最大并行请求数。默认为 3。
// automaticNameDelimiter：表示自动生成的名称的分隔符。默认为 ~。
// cacheGroups：表示缓存组，用于将模块分组。每个缓存组可以指定一些选项，如 test、priority 等。
// 在上面的示例中，chunks: 'all' 表示将所有的公共模块提取出来，minSize: 20000 表示要提取的模块的最小体积为 20KB，
// test: /[\\/]node_modules[\\/]/ 表示将第三方库提取出来，priority: -10 表示优先级为 -10，
// minChunks: 2 表示将非第三方库的公共模块提取出来，priority: -20 表示优先级为 -20。
//
// 需要注意的是，splitChunks 功能只在生产模式下启用，可以通过设置 productionSourceMap: false 来关闭 SourceMap，从而减小打包后的文件体积。

    configureWebpack: {
        optimization: {
            splitChunks: {
                chunks: 'all',
                minSize: 50000,
                maxSize: 0,
                minChunks: 5,
                maxAsyncRequests: 30,
                maxInitialRequests: 30,
                automaticNameDelimiter: '_',
                cacheGroups: {
                    vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10
                    },
                    default: {
                        minChunks: 5,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@i': path.resolve(__dirname, './src/assets'),
            }
        },
// 这里的 CompressionWebpackPlugin 插件可以帮助我们开启 Gzip 压缩，并压缩指定的静态资源文件。其中，filename 表示压缩后的文件名，
// algorithm 表示压缩算法，test 表示要压缩的文件类型，threshold 表示文件大小超过多少字节才会被压缩，
// minRatio 表示压缩后的文件大小与原文件大小的比例阈值，deleteOriginalAssets 表示是否删除原文件。
// 需要注意的是，开启 Gzip 压缩会增加 CPU 的负担，可能会影响服务器的性能。因此，建议在使用 Gzip 压缩时，根据实际情况进行调整，避免过度压缩。
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path][base].gz',
                algorithm: 'gzip',
                test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
                threshold: 10240*3,
                minRatio: 0.8,
                deleteOriginalAssets: false
            })
        ]
    },
})

